<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="application/javascript" src="js/echarts.js"></script>
		<script type="application/javascript" src="js/jquery.min.js"></script>
	</head>
	<body style="background: url(img/bg.png);background-repeat: no-repeat;background-size: 100%;overflow: hidden;">
		<div style="width: 100%;height: 100vh;" id="map"></div>
		<img src="img/1.jpg" id="img1" style="display: none;" />
		<img src="img/2.jpg" id="img2" style="display: none;" />
		<img src="img/3.jpg" id="img3" style="display: none;" />
		<img src="img/4.jpg" id="img4" style="display: none;" />
		<img src="img/5.jpg" id="img5" style="display: none;" />
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('map'));
		//通过后台接口返回的数据  value计算取值范围得到5个等级其一 选择img的对应五张图片纹理显示
		var data = [{
				name: "呈贡区",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img1"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "安宁市",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img2"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "安宁市",
				value: 12,
				itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img2"),
							repeat: 'repeat'
						}
					}
				}
			},
			{
				name: "晋宁区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "宜良县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img4"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "石林彝族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "官渡区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img1"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "五华区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img2"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "盘龙区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "富民县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "寻甸回族彝族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "禄劝彝族苗族自治县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img5"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "东川区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img1"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "嵩明县",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img2"),
						repeat: 'repeat'
					}
				}
			},
			{
				name: "西山区",
				value: 12,
				itemStyle: {
					color: {
						image: document.getElementById("img3"),
						repeat: 'repeat'
					}
				}
			}
		];
		$.getJSON("js/kunmingMap.js", function(geoJson) {
			echarts.registerMap('昆明', geoJson);
			let option = {
				//不触发事件
				silent:true,
				//要显示纹理要关闭这个属性
				visualMap: {
					show: false
				},
				//公共的一些设置  我理解为容器
				geo: {
					map: '昆明',
					aspectScale: 1,
					roam: false,
					itemStyle: {
						//容器外边框设置
						normal: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fff'
							}, {
								offset: 1,
								color: '#fff'
							}], false),
							borderWidth: 3.5, //设置外层边框
							shadowColor: '#fff',
							shadowOffsetY: 0,
							shadowBlur: 60
						},
						//选中状态
						emphasis: {
							show:false
						}
					}
				},
				//我的理解为每个小区域的容器的公共设置
				series: [{
					type: "map",
					map: '昆明',
					aspectScale: 1,
					itemStyle:{
						normal: {
							borderColor: '#6FE7FF',
							borderWidth: 1
						},
						emphasis: {
							show:false
						}
					},
					label: {
						normal: {
							show: true,
							fontSize: 12,
							color: "#6FE7FF"
						},
						emphasis: {
							color: '#6FE7FF'
						}
					},
					//每个小区域的独立设置
					data: data
				}]
			};
			myChart.setOption(option);
		})
	</script>
</html>
